<template>
    <div>
        <div style="padding:0 20px;
        padding-top:15px;
        text-align:left;position: sticky;top:0;background-color: #fff;z-index: 2">
            <div>


                <div class="tip_wrap">
                    <!-- <span>前端</span>
                    <span>后端</span>
                    <span>其他</span> -->

                    <a-menu v-model:selectedKeys="current" mode="horizontal">
                        <a-menu-item key="mail">
                            <template #icon>
                                <mail-outlined />
                            </template>
                            <router-link to="./picture"><a rel="noopener noreferrer">
                                照片墙
                            </a></router-link>
                        </a-menu-item>
                        <a-menu-item key="app" disabled>
                            <template #icon>
                                <appstore-outlined />
                            </template>
                            Navigation Two
                        </a-menu-item>
                        <a-sub-menu>
                            <template #icon>
                                <setting-outlined />
                            </template>
                            <template #title>Navigation Three - Submenu</template>
                            <a-menu-item-group title="Item 1">
                                <a-menu-item key="setting:1">Option 1</a-menu-item>
                                <a-menu-item key="setting:2">Option 2</a-menu-item>
                            </a-menu-item-group>
                            <a-menu-item-group title="Item 2">
                                <a-menu-item key="setting:3">Option 3</a-menu-item>
                                <a-menu-item key="setting:4">Option 4</a-menu-item>
                            </a-menu-item-group>
                        </a-sub-menu>
                        <a-menu-item key="alipay">
                            <a href="https://antdv.com" target="_blank" rel="noopener noreferrer">
                                Navigation Four - Link
                            </a>
                        </a-menu-item>
                    </a-menu>


                </div>

                 <a-input-search
                        v-model:value="searchValue"
                        placeholder="input search text"
                        style="width: 200px;position:absolute;right:20px"
                        @search="onSearch"
                />

            </div>

            <!-- <a-divider /> -->
        </div>
        <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
            <template #footer>
                <div>
                    <a style="color: #333" href="https://wuyunxia.top" target="_blank">个人网站</a>
                    footer part
                </div>
            </template>

            <template #renderItem="{ item }">
                <router-link
                        tag="detail"
                        target="_blank"
                        :to="{ path: './detail', query: {id: item.id} }">
                    <a-list-item key="item.title">
                        <template #actions>
          <span v-for="{ type, text } in actions" :key="type">
            <component v-bind:is="type" style="margin-right: 8px" />
            {{ text }}
          </span>
                        </template>
                        <template #extra>
                            <img
                                    width="272"
                                    alt="logo"
                                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                            />
                        </template>
                        <a-list-item-meta :description="item.description">
                            <template #title>
                                <a>{{ item.title }}</a>

                            </template>
                            <template #avatar><a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
                                <span style="margin-left:10px;">{{item.author}}</span>
                                <span style="margin-left:10px;">{{item.time}}</span>
                            </template>
                        </a-list-item-meta>
                        <span style="display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
">
                    {{ item.content }}
                </span>
                    </a-list-item>
                </router-link>
                <a-divider />
            </template>

        </a-list>
    </div>

</template>
<script>
    // import { transformTimestamp } from "@/util/transformDate"
    import { getArticleAll, selectByKeyword } from "@/api/article/index"
    import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
    import { defineComponent, ref, onMounted } from 'vue';
    const listData = ref([]);
    const searchValue = ref('');


    export default defineComponent({
        components: {
            StarOutlined,
            LikeOutlined,
            MessageOutlined,
        },

        setup() {



            const getArticleList = () => {

                getArticleAll().then(res=>{

                    res.list.forEach(item=>{
                        let html = item.content;
                        let content = html;
                        if(html.indexOf("```")) {
                            let strArr = content.split("```");
                            if(strArr[1])item.content = strArr[1]
                        }

                        console.log(item.time)
                        // item.href = 'detail?id='+item.id;
                        // item.time = transformTimestamp(item.time)
                    });
                    listData.value = res.list;
                })
            };

            const pagination = {
                onChange: page => {
                    console.log(page);
                },
                pageSize: 10,
            };
            const actions = [
                {
                    type: 'StarOutlined',
                    text: '156',
                },
                {
                    type: 'LikeOutlined',
                    text: '156',
                },
                {
                    type: 'MessageOutlined',
                    text: '2',
                },
            ];

            /**
             * 搜索
             */
            const onSearch = value=>{
                selectByKeyword({keyword: value}).then(res=>{
                    res.list.forEach(item=>{
                        let html = item.content;
                        let content = html;
                        if(html.indexOf("```")) {
                            let strArr = content.split("```");
                            if(strArr[1])item.content = strArr[1]
                        }

                        // item.href = 'detail?id='+item.id;
                        // item.time = transformTimestamp(item.time)
                    });
                    listData.value = res.list;
                })
            };

            onMounted(getArticleList);

            return {
                listData,
                pagination,
                actions,
                getArticleList,
                onSearch,
                searchValue
            };
        },
    });
</script>

<style lang="scss">
    .tip_wrap{
        display: inline-block;
        width: 100%;
        .ant-menu-horizontal{
            border-bottom: 2px solid #f0f0f0;
            box-shadow: 2px 2px 5px #f0f0f0;
        }
        span{
            // display: inline-block;padding: 1px 6px;cursor:pointer;color:#666;background-color: #ddd;border-radius: 3px;margin-left: 10px
        }
    }
</style>
